<div id="Div">
<!-- ----------------------------------------------------------------------------------------------- -->
<div id="cateDiv">
    <ul id="catenameUL" style="overflow: scroll;" >	
        {% for someCate in site.categories %}
            {% assign cateClicked = someCate | first %}    
            {% assign catePosts = someCate | last %}
                <li id="{{cateClicked}}" class="cateNames"><span>{{ cateClicked }}</span><sup class="cateSup">{{catePosts | size }}</sup></a></li>
        {% endfor %}
    </ul>   
</div>

<!-- ----------------------------------------------------------------------------------------------- -->

<div id="tagDiv"> 
    <ul class="tagsDiv1-allTags" id="tagnameUL" style="overflow: scroll;" >
        {% for tag in site.tags %}
            {% assign t = tag | first %}
            {% assign files = tag | last %}
              <li class="tagNames" id="Tag{{ t }}" data-tagcate="{{ files[0].categories }}"><span>{{ t }}</span><sup class="tagSup">{{files | size}}</sup></li>
        {% endfor %}
    </ul>
</div>
<!-- 这里的id 必须不能和catediv 下的id一样. 应为当标签名和大类名一样时候 高亮会出问题.会同时高亮... -->
<!-- ----------------------------------------------------------------------------------------------- -->

<div id="lineLeft"> 
  <div class="lineFlex">
    <div id="lineLeft-left">  </div>
      <div class="lineInDiv"> </div> 
    <div id="lineLeft-right"> </div>
  </div>
</div>

	<div id="filenameDiv" >
		<!--  顶部按钮 栏 -->
		<li id="filenameDivBtnes">
      <svg class="icon" aria-hidden="true" id="filenameDiSearch" style="font-size:16px;" >
        <use xlink:href="#icon-sousuo"></use>
      </svg>  
		  <a href id="allCateTagPostBtn" style="width:150px; text-align: center"> 
			  <!-- 这个函数 在 catefilter.js 里面 -->
        <svg class="icon" aria-hidden="true" style="font-size:16px; padding-left: 0; padding-right: 0;">
            <use xlink:href="#icon-iconfontcolor52"></use>
        </svg>
            <sup style="font-size:0.7em; float:none; position:relative; left: -7px;">{{site.categories | size }}</sup> 
        <svg class="icon" aria-hidden="true" style="font-size:16px; padding-left: 0; padding-right: 0;" >
          <use xlink:href="#icon-biaoqian"></use>
        </svg>
            <sup style="font-size:0.7em; float:none; position:relative; left: -7px;">{{site.tags | size }}</sup>
        <svg class="icon" aria-hidden="true" style="font-size:16px; padding-left: 0; padding-right: 0;">
          <use xlink:href="#icon-wenjianleixing"></use>
        </svg>
            <sup style="font-size:0.7em; float:none; position:relative; left: -7px;">{{site.posts | size }}</sup>
			</a>  
        <svg class="icon" aria-hidden="true" id="filenameDivDate"; style="font-size:16px;">
          <use xlink:href="#icon-eyeblocked"></use>
        </svg>
        <!-- 这个显隐函数 在main.js 里 -->
		</li><br>
		<ul id="filenameUL" style="overflow: scroll;">
			{% for post in site.posts reversed %}
      <a href="{{ post.url }}">
				<li class="postNames" data-cate="{{post.categories}}" data-tag="{{post.tags}}">
					 {{ post.title }}<sup class="fileNameDate hidden">{{ post.date | date: "%Y-%m-%d" }}</sup>
			</li></a>
			{% endfor %}
		</ul>
	</div>

<div id="lineRight"> 
  <div class="lineFlex">
    <div id="lineRight-left">  </div>
      <div class="lineInDiv"> </div> 
    <div id="lineRight-right"> </div>
  </div>
</div>	

<!-- ----------------------------------------------------------------------------------------------- -->

<div id="contentDiv" class="markdown-body">
    <div id="contentDiv-Buttons" style="display: flex; display:none;" >
        {% if page.previous %}
            <a href="{{ page.previous.url }}" id="prePost"> <button class="contentButton">
             <span style="display: inline-block; transform: rotate(180deg);">➤➤</span> {{ page.previous.title }} </button>  
            </a>
        {% endif %}	
        {% if page.next %}
            <a href="{{ page.next.url }}" id="nextPost">	<button class="contentButton">
              {{ page.next.title }} ➤➤</button>	
            </a>
        {% endif %}	
    </div>

	<div style="text-align: center;">{{ page.title }}</div>	


	{% if page.meta != ‘’ %}
		meta: {{page.meta}} <hr>
	{% endif %}
	<!-- 这里判断一下 有没有设置meta 有就显示 没有就不显示 -->






<div>
  <ul id=“list”></ul>
</div>





  





	<div id="pageContent">
	{{ content }}
	</div>
	<!-- 带page前缀 就不会显示文件的标题.  没有page前缀就会显示文件标题 -->
</div>

<div id="lineSide"> 
  <div class="lineFlex">
    <div id="lineSide-left">  </div>
      <div class="lineInDiv"> </div> 
    <div id="lineSide-right"> </div>
  </div>
</div>
<div id="rightNavbar" >
	<ul id="MDh1" class="CSMDh1">
		<!--  <p style='text-align: center'> {{page.title}} </p>  文章标题.这里不是pjax区域.会有问题 -->
	</ul>
</div>
<!-- ----------------------------------------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------------------------------------- -->
</div>